<!--
 * @Description: 
 * @Author: LZX
 * @Date: 2021-10-29 09:46:11
 * @LastEditors: LZX
 * @LastEditTime: 2021-11-26 14:33:29
-->
<template>
  <div class="realname-content">
    <el-form :inline="true" :model="queryParams" class="demo-form-inline">
      <!-- 头部操作栏 -->
      <el-form-item>
        <el-date-picker
          v-model="queryParams.beginTime"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="queryParams.status"
          placeholder="请选择状态"
          clearable
        >
          <el-option label="通过" value="通过"></el-option>
          <el-option label="不通过" value="不通过"></el-option>
          <el-option label="未审核" value="未审核"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="queryParams.name"
          placeholder="申请人编号"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表单 -->
    <el-table :data="realNameDate" style="width: 100%" size='small' :align='center' 
:cell-style='cellStyle' 
:header-cell-style='rowClass'>
      <el-table-column prop="id" label="序号" width="80"> </el-table-column>
      <el-table-column prop="userId" label="申请人编号" width="80">
      </el-table-column>
      <el-table-column prop="realname" label="姓名"> </el-table-column>
      <el-table-column prop="applyTime" label="申请时间" width="180">
          <template v-slot="scope">
                {{scope.row.logTime | fmtDateTime}}
            </template> </el-table-column>
      <el-table-column prop="idCard" label="身份证号" width="180"> </el-table-column>
      <el-table-column prop="idcardPhotoPositive" label="身份证正面">
          <template v-slot="scope">
              <img :src="scope.row.idcardPhotoPositive" alt="" height="30px"> 
            </template>
      </el-table-column>
      <el-table-column prop="idcardPhotoNegative" label="身份证反面">
          <template v-slot="scope">
              <img :src="scope.row.idcardPhotoNegative" alt="" height="30px"> 
            </template>
      </el-table-column>
      <el-table-column prop="bankCard" label="银行卡号" width="180"> </el-table-column>
      <el-table-column prop="bankCardPhoto" label="银行卡">
          <template v-slot="scope">
              <img :src="scope.row.bankCardPhoto" alt="" height="30px"> 
            </template> </el-table-column>
      <el-table-column  label="状态"> 
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status==='通过'" type="success">{{ scope.row.status }}</el-tag>
          <el-tag v-if="scope.row.status==='不通过'" type="danger">{{ scope.row.status }}</el-tag>
          <el-tag v-if="scope.row.status==='未审核'" type="info">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作"> 
         <template slot-scope="scope">
          <el-button v-if="scope.row.status==='未审核'" type="success" size="mini" @click="pass(scope.row)">通过</el-button>
          <el-button v-if="scope.row.status==='未审核'" type="danger" size="mini" @click="nopass(scope.row)">不通过</el-button>
          <el-button v-if="scope.row.status==='通过'" type="danger" size="mini" @click="nopass(scope.row)">不通过</el-button>
          <el-button v-if="scope.row.status==='不通过'" type="success" size="mini" @click="pass(scope.row)">通过</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import request from '@/utils/request'
export default {
  data() {
    return {
      queryParams: {
        page: 1,
        pageSize: 5,
      },
      center:''
    };
  },
  computed: {
    ...mapState("realname", ["realNameDate"]),
  },
  methods: {
    ...mapActions("realname", ["requireRealnameDate"]),
    cellStyle({row, column, rowIndex, columnIndex}){
    return 'text-align:center';
    },

    rowClass({row, rowIndex}){
    return 'text-align:center';
      },
    checkNoPass(data) {
      let res = request.get('/certification/checkNoPass',{
            params: {
              id: data,
            }
          })
     return res
    },
    checkPass(data) {
      let res = request.get('/certification/checkPass',{
            params: {
              id: data,
            }
          })
      return res
    },
    async pass(row) {
      const res = await this.checkPass(row.id)
      this.$notify.success({
        title: '成功',
        message: res.message
      })
      this.requireRealnameDate(this.queryParams);
    },
    async nopass(row) {
      const res = await this.checkNoPass(row.id)
      this.$notify.success({
        title: '成功',
        message: res.message
      })
      this.requireRealnameDate(this.queryParams);
    }
  },
  created() {
    this.requireRealnameDate(this.queryParams);
  },
  mounted() {},
};
</script>
<style scoped>
</style>